<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吃鸡练习</title>
</head>

<body>
    <div>
        <button id="btn1">将吃鸡放到所有城市后面</button>
        <button id="btn2">将吃鸡放到所有城市前面</button>
        <button id="btn3">将吃鸡放到上海的后面</button>
        <button id="btn4">将吃鸡放到上海的前面</button>
        <button id="btn5">删除北京</button>
        <button id="btn6">删除所有节点</button>
    </div>
    <ul>
        <li id="beijing">北京</li>
        <li id="shanghai">上海</li>
        <li id="zhengzhou">郑州</li>
        <li id="chiji">吃鸡</li>
        <li id="wangzherongyao">王者荣耀</li>
    </ul>
</body>
<script>
	
	let btn1 = document.getElementById("btn1");
	let btn2 = document.getElementById("btn2");
	let btn3 = document.getElementById("btn3");
	let btn4 = document.getElementById("btn4");
	let btn5 = document.getElementById("btn5");
	let btn6 = document.getElementById("btn6");
	
	let beijing = document.getElementById("beijing");
	let shanghai = document.getElementById("shanghai");
	let zhengzhou = document.getElementById("zhengzhou");
	let chiji = document.getElementById("chiji");
	let wangzhe = document.getElementById("wangzherongyao");
	let chijiPN = document.getElementById("chiji").parentNode;
	
	btn1.onclick = function(){
		chijiPN.insertBefore(chiji,wangzhe);
	}
	
	btn2.onclick = function(){
		chijiPN.insertBefore(chiji,chijiPN.firstChild);
	}
	
	btn3.onclick = function(){
		chijiPN.insertBefore(chiji,shanghai.nextSibling);
	}
	
	btn4.onclick = function(){
		chijiPN.insertBefore(chiji,shanghai);
	}
	
	btn5.onclick = function(){
		try{
			chijiPN.removeChild(beijing,chijiPN);
		}catch(e){
			alert("北京节点已经被删除！")
		}
	}
	
	btn6.onclick = function(){
		while(chijiPN.firstChild){
			chijiPN.removeChild(chijiPN.firstChild)
		}	
		let button = document.getElementsByTagName("button");
		for(let i=0;i<button.length;i++){
			button[i].setAttribute("disabled","");
		}
	}
</script>
</html>